<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        a {
            margin: 0 auto;
            color: #f10180;
            text-decoration: none;
        }

        .first img {
            width: 100%;
        }


        .one {
            width: 80%;
            height: 500px;
            display: flex;
            /* background-color: aquamarine; */
            margin: 0 auto;
            justify-content: space-between;
            position: relative;
        }

        .one div {
            width: 20%;
            height: 325px;
            /* background-color: rebeccapurple; */
            text-align: center;
            position: relative;
            margin-bottom: 150px;
        }

        .one div:hover {
            border: 2px solid lightcoral;
        }

        .one div:hover .link {
            background-color: #f10180;
        }

        .one div:hover .link a {
            color: white;
        }

        .one div .big {
            width: 100%;
        }

        .one div .small {
            margin-top: -50px;
            margin-bottom: 10px;
        }

        .one div .text1 {
            font-size: 12px;
        }

        .one div .text2 {
            font-size: 14px;
            color: lightcoral;
        }

        .one div p {
            margin-bottom: 10px;
        }

        .one div .link {
            width: 80%;
            margin: 0 auto;
            border: 1px solid lightpink;
        }


        aside {
            width: auto;
            height: auto;
            position: fixed;
            right: 50px;
            bottom: 50%;
            /* background-color: blueviolet; */
            display: none;
            border: 1px solid black;
        }

        aside ul li{
            border-bottom: 1px solid black;
            margin-bottom: 20px;
        }


    </style>
</head>

<body>

    <header class="first" id="go1">
        <img src="/素材/img/jquer唯品会商城/时尚女装.png" alt="">
    </header>

    <section class="one">
        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>
    </section>



    <section class="one">
        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>
    </section>







    <header class="first" id="go2">
        <img src="/素材/img/jquer唯品会商城/品质男装.png" alt="">
    </header>

    <section class="one">
        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>
    </section>





    <section class="one">
        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>
    </section>



    <header class="first" id="go3">
        <img src="/素材/img/jquer唯品会商城/潮流鞋包.png" alt="">
    </header>

    <section class="one">
        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>
    </section>





    <section class="one">
        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>
    </section>






    <header class="first" id="go4">
        <img src="/素材/img/jquer唯品会商城/运动户外.png" alt="">
    </header>

    <section class="one">
        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>
    </section>





    <section class="one">
        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>

        <div>
            <img src="/素材/img/jquer唯品会商城/商品.png" class="big">
            <img src="/素材/img/jquer唯品会商城/商品小图.png" class="small">
            <p class="text1">雪中飞女装疯抢专场</p>
            <p class="text2">3折封顶</p>
            <p class="link"><a href="#">立即抢购</a></p>
        </div>
    </section>



    <aside>
        <ul>
            <li id="go1">时尚女装</li>
            <li id="go2">品质男装</li>
            <li id="go3">潮流鞋包</li>
            <li id="go4">运动户外</li>
        </ul>
    </aside>



    <script>
        let aside = document.querySelector("aside")
        window.addEventListener("scroll", function () {
            if (window.pageYOffset > 100) {
                aside.style.display = "block"
            }
            else {
                aside.style.display = "none"
            }
        })



        let lis = document.querySelectorAll("aside ul li")
        lis.forEach(function (item) {
            item.addEventListener("click", function () {
                let target = document.getElementById(item.id)
                if (target) {
                    window.scrollTo({
                        top: target.offsetTop
                    })
                }
            })
        })








    </script>





</body>

</html>